<script lang="ts" setup>
import { usePointStore } from '@/stores/point';
import type { tagForm } from '@/api/type';
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { createPost, getAllPosts, type postForm } from '@/api/post';
import { usePostStore } from '@/stores/post';
import moment from 'moment';
import { Edit } from '@element-plus/icons-vue'

const tags = reactive<tagForm[]>(usePointStore().tag);

const postList = ref<postForm[]>([])
const getPostList = async () => {
    let res = await getAllPosts();
    postList.value = res.data
    usePostStore().setPosts(res.data);
    postList.value.forEach(item => {
        item.formatDate = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
    });
}
// 进入具体帖子
const router = useRouter();
const handleInto = (id: number) => {
    router.push(
        {
            name: "discusionMain",
            query: {
                postId: id
            }
        }
    )
}
// 控制对话框
const dialogVisible = ref(false)
// 富文本编辑器
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { useStudentStore } from '@/stores/student';
import { ElMessage } from 'element-plus';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const editPost = () => {
    dialogVisible.value = true
}
const newPost = ref<postForm>({})
// 发帖确定
const confirmPost = async () => {
    newPost.value.studentUserName = useStudentStore().studentInfo.username;
    newPost.value.createTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
    let res = await createPost(newPost.value)
    ElMessage.success(res.data)
    dialogVisible.value = false
    window.location.reload();

}
onMounted(() => {
    getPostList();
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

</script>

<template>
    <div class="main">
        <el-card class="tag">
            <p style="font-weight: bold;"> 课程博客分类</p>
            <el-divider />
            <el-scrollbar style="height:62vh;">
                <p v-for="item in tags" :key="item.id">{{ item.name }}</p>
            </el-scrollbar>
        </el-card>
        <div class="content">
            <el-scrollbar height="90vh">
                <template v-for="item in postList" :key="item.id">
                    <el-card style="width:100%;height: 120px;" shadow="hover" @click="handleInto(item.id as number)">
                        <div slot="header" class="card-head">{{ item.title }}</div>
                        <div class="down">
                            <!-- <span class="font-size">{{ item.content }}</span> -->
                            <!-- 使用 v-html 渲染带有 HTML 标签的内容 -->
                            <div v-html="item.content" class="font-size"></div>
                            <span class="font-size" style="float: right;">{{ item.createTime }}</span>
                        </div>
                    </el-card>
                </template>
            </el-scrollbar>
        </div>
        <el-affix :offset="100">
            <el-button type="primary" :icon="Edit" circle @click="editPost" />
        </el-affix>
    </div>
    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="发表主题帖" width="700" draggable>
        <!-- 主题帖标题输入框 -->
        <div style="display: flex; align-items: center;">
            <el-input v-model="newPost.title" placeholder="请输入主题帖标题" style="flex: 1; margin-right: 10px;"></el-input>
            <el-select v-model="newPost.tagId" placeholder="请选择标签" style="width: 120px;">
                <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
            </el-select>
        </div>
        <div style="border: 1px solid #ccc">
            <!-- 富文本编辑器 -->
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                mode="default" />
            <Editor style="height: 300px; overflow-y: hidden;" v-model="newPost.content" :defaultConfig="editorConfig"
                mode="default" @onCreated="handleCreated" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmPost">确认发表</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
.main {
    display: flex;
    justify-content: center;
}

.content {
    padding-top: 10px;
    background-color: #fff;
    width: 50%;

    .card-head {
        font-weight: bold;
        font-size: 18px;
    }

    .down {
        margin-top: 15px;
    }

    .font-size {
        color: #888888;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.tag {
    width: 15%;
    height: 80vh;
    margin-right: 20px;
    border-radius: 3%;
}
</style>
